<template>
    <div class="content" style="text-align:center;display: flex;">
        <div style="width:calc(100vw - 130px);height: 100vh;">
                <A按钮 v-show="显示条件=='按钮'"/>
                <S输入框 v-show="显示条件=='输入框'"/>
                <K开关 v-show="显示条件=='开关'"/>
                <D单选框 v-show="显示条件=='单选框'"/>
                <D多选框 v-show="显示条件=='多选框'"/>
                <D多选框组 v-show="显示条件=='多选框组'"/>
                <L链接 v-show="显示条件=='链接'"/>
                <X下拉选择器 v-show="显示条件=='下拉选择器'"/>
                <R日期选择器 v-show="显示条件=='日期选择器'"/>
                <G滚动条 v-show="显示条件=='滚动条'"/>
                <B表格 v-show="显示条件=='表格'"/>
                <B表格列 v-show="显示条件=='表格列'"/>
                <D对话框 v-show="显示条件=='对话框'"/>
                <X消息提示 v-show="显示条件=='消息提示'"/>
                <X消息弹框 v-show="显示条件=='消息弹框'"/>
                <C抽屉 v-show="显示条件=='抽屉'"/>
                <F分页 v-show="显示条件=='分页'"/>
                <E饿了么首页 v-show="显示条件=='饿了么首页'"/>
                <S设计器 v-show="显示条件=='设计器'"/>
                <!-- {1} -->

                <!-- <A按钮 v-if="显示条件=='按钮'"/>
                <S输入框 v-if="显示条件=='输入框'"/>
                <K开关 v-if="显示条件=='开关'"/> -->


        </div>
        <div style="width: 130px;height: 100vh;">
            <el-scrollbar height="100%;" style="background-color:#545c64 ;" >
                <el-menu default-active="2" active-text-color="#ffd04b" background-color="#545c64" style="width: 125px;"
                    text-color="#fff" >
                    <el-menu-item v-for="(item) in 菜单列表" :index="item.index" @click="菜单点击事件(item.index)" height="30px" >
                        {{ item.title }}
                    </el-menu-item>
                </el-menu>
            </el-scrollbar>
        </div>


    </div>
</template>
<script setup>
import A按钮 from '../library/按钮.vue'
import S输入框 from '../library/输入框.vue'
import K开关 from '../library/开关.vue'
import D单选框 from '../library/单选框.vue'
import D多选框 from '../library/多选框.vue'
import D多选框组 from '../library/多选框组.vue'
import L链接 from '../library/链接.vue'
import X下拉选择器 from '../library/下拉选择器.vue'
import R日期选择器 from '../library/日期选择器.vue'
import G滚动条 from '../library/滚动条.vue'
import B表格 from '../library/表格.vue'
import B表格列 from '../library/表格列.vue'
import D对话框 from '../library/对话框.vue'
import X消息提示 from '../library/消息提示.vue'
import X消息弹框 from '../library/消息弹框.vue'
import C抽屉 from '../library/抽屉.vue'
import F分页 from '../library/分页.vue'
import E饿了么首页 from '../library/饿了么首页.vue'
import S设计器 from '../library/设计器.vue'
//{2}

import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 = proxy.router



const 显示条件 = ref("饿了么首页")
const 菜单点击事件 = (index) => {
    显示条件.value = index
    console.log(index)
}

const 菜单列表 = ref([
    { title: "A 按钮", index: "按钮" },
    { title: "S 输入框", index: "输入框" },
    { title: "K 开关", index: "开关" },
    { title: "D 单选框", index: "单选框" },
    { title: "D 多选框", index: "多选框" },
    { title: "D 多选框组", index: "多选框组" },
    { title: "L 链接", index: "链接" },
    { title: "X 下拉选择器", index: "下拉选择器" },
    { title: "R 日期选择器", index: "日期选择器" },
    { title: "G 滚动条", index: "滚动条" },
    { title: "B 表格", index: "表格" },
    { title: "B 表格列", index: "表格列" },
    { title: "D 对话框", index: "对话框" },
    { title: "X 消息提示", index: "消息提示" },
    { title: "X 消息弹框", index: "消息弹框" },
    { title: "C 抽屉", index: "抽屉" },
    { title: "F 分页", index: "分页" },
    //{3}
    // { title: "AA 饿了么首页", index: "饿了么首页" },

    
])
const 菜单排序 =()=>{
    菜单列表.value= 菜单列表.value.sort(function(a, b) {
    // 按照 title 进行升序排序
    return a.title.localeCompare(b.title);
})
菜单列表.value.unshift({ title: "设计器", index: "设计器" })
菜单列表.value.unshift({ title: "饿了么首页", index: "饿了么首页" })
}
菜单排序()









</script>
<style  scoped></style>